<template>
	<view class="container">
		<u-navbar title='付款记录' leftIconColor="#1E272E" :titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#000000'}"
			bgColor="#fff" :auto-back="true"></u-navbar>
		<view class="content">
			<view style="width: 120rpx;height: 50rpx;font-size: 24rpx; background-color: darkgray;border-radius: 20rpx;color: #333;line-height: 50rpx;text-align: center;margin-left: 20rpx;"
				@click="initData">
				全部账单</view>
			<view style="display: flex;justify-content: space-between;font-size: 24rpx;margin-top: 15rpx;">
				<view style="margin-left: 15rpx;display: flex;align-items: center;" @click="show=true">
					<text v-if="!value2" style="display: flex;">选择日期</text>
					<text v-if="value2" style="display: flex;">{{value2}}</text>
					<image src="https://qiniushelves.jiachuangnet.com/renovation/img/V875306down.png"
						style="width: 25rpx;height: 25rpx;margin-left: 10rpx;"></image>
				</view>
				<view style="margin-left: 15rpx;display: flex;align-items: center;" @click="setStore">
					<text style="display: flex;" v-if="!name">所有门店</text>
					<text style="display: flex;" v-if="name">{{name}}</text>
					<image src="https://qiniushelves.jiachuangnet.com/renovation/img/V875306down.png"
						style="width: 25rpx;height: 25rpx;margin-left: 10rpx;"></image>
				</view>
				<view style="margin-right: 15rpx;">￥{{payData.sumMoney||0.00}}</view>
			</view>
			<!-- <view style="margin-top: 200rpx;" v-if='!payData.list.length'>
				<u-empty mode="data" textColor="#f56c6c"
					icon="https://qiniushelves.jiachuangnet.com/renovation/img/V6496061742536893385.png">
				</u-empty>
			</view> -->
			<view class="list">
				<view v-for="item in payData.list" class="dataInner" @click="payDetail(item)">
					<view style="display: flex;margin-left: 20rpx;">
						<view style="width: 75rpx;">
							<image style="width: 75rpx;height: 75rpx;"
								src="https://qiniushelves.jiachuangnet.com/renovation/img/V3991171742537371044.png">
							</image>
						</view>
						<view style="display: flex;flex-direction: column;margin-left: 20rpx;align-items: flex-start">
							<text>【拉卡拉商户】</text><text
								style="color: DarkGray;margin-left: 15rpx;">{{item.payTime}}</text>
						</view>
					</view>
					<view style="color: #f56c6c;margin-right: 25rpx;font-weight: 600;">{{"-"+item.payAmount}}</view>
				</view>
			</view>
		</view>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="year-month" @confirm="getData"
			@cancel="show=false"></u-datetime-picker>
		<u-picker :show="storeShow" :columns="columns" keyName="assignName" @confirm="getstoreData"
			@cancel="storeShow=false"></u-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				payData: [],
				show: false,
				storeShow: false,
				columns: [],
				value1: Number(new Date()),
				value2: "",
				name:"",
			}
		},
		onShow() {
			// var date = new Date();
			// var year = date.getFullYear();
			// var month = date.getMonth() + 1;
			// this.value2 = year + '年' + month + '月'
			this.initData()
		},
		onReady() {
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			initData() {
				this.value2=""
				this.name=""
				const data = {
					// time:this.value2,
					time: "",
					assignTaskId: ""
				}
				uni.$u.http.post('/contract/getMyPaymentHistoryVo', data).then(res => {
					this.payData = res
					console.log(res, "付款列表");
				})
			},
			payDetail(item) {
				uni.navigateTo({
					url: `/pages/comfirmPay/payDetail?data=${JSON.stringify(item)}`
				})
			},
			getData(e) {
				let date = new Date(e.value);
				let res = date.getFullYear();
				if (date.getMonth() < 9) {
					res += '年' + (date.getMonth() + 1) + '月';
				} else {
					res += '年' + (date.getMonth() + 1) + '月';
				}
				this.value2 = res
				this.show = false

				const data = {
					time: this.value2,
					assignTaskId: this.assignTaskId
				}
				uni.$u.http.post('/contract/getMyPaymentHistoryVo', data).then(res => {
					this.payData = res
					console.log(res, "付款列表");
				})

			},
			async setStore() {
				const data = {
					assignName: "",
					status: ""
				}
				const res = await uni.$u.http.post('/contract/getFranchiseeList', data).then()
				this.columns = [res]
				console.log(this.columns);
				this.storeShow = true

			},
			getstoreData(item) {
				this.assignTaskId = item.value[0].assignTaskId
				this.name=item.value[0].assignName
				this.storeShow = false
				const data = {
					time: this.value2,
					assignTaskId: this.assignTaskId
				}
				uni.$u.http.post('/contract/getMyPaymentHistoryVo', data).then(res => {
					this.payData = res
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 750rpx;
		position: absolute;
		top: 195rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.list {
		.dataInner {
			width: 750rpx;
			height: 105rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid Gainsboro;
			margin-bottom: 20rpx;

		}

	}
</style>